/*
 * @Author: wangguanqing 
 * @Date: 2018-06-29 09:10:14 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-10 17:19:19
 */
<template>
  <div class="gq_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
      <div slot="main" class="depotData">
          <div class="map">
            <depot-data-map @on-map="onDepotMap" v-model="aggregateData"></depot-data-map>
          </div>
          <div class="dataDisplay">
              <top-logo-title>
                  <div slot="topTitle">钢圈仓库DashBoard</div>
              </top-logo-title>
              <div class="chart">
                  <!-- 出入库动态 -->
                  <div class="outInDynamic">
                      <main-title>
                          <span slot="title">出入库动态</span>
                      </main-title>
                      <ul id="dynamicCondition" class="list">
                          <li v-for="(item,index) in aggregateData.goodslogList" :key="index" class="security" >
                              <span>{{item.productareaName}}</span>
                              <span>{{item.warehouseName}}</span>
                              <span>{{item.goodsDirection === 0 ? "入库" : "出库"}}</span>
                              <span>{{item.partsnameName }}&nbsp;&nbsp;{{item.goodsDirection === 0 ? item.goodsEnterweight : item.goodsOutweight}}吨</span>
                              <span>{{item.goodslogDateStr}}</span>
                              <span>{{item.goodsDirection === 0 ? "入库" : "出库"}}正常</span>
                          </li>
                      </ul>
                  </div>
                  <!-- 自营合营业 -->
                  <div class="proprietary">
                    自营库:<div class="num">2</div>
                    合营库:<div class="num">2</div>
                    认证库:<div class="num">35</div>
                  </div>
                  <!-- 库存商品总量 今日总入库 今日总出库 -->
                  <div class="inventory">
                    <div class="item">
                      <p>库存商品总量(吨)</p>
                      <turn-page-num :decimal="false" :decimalArr="'height:46px'" :numStyle="'margin-top:5px;'" v-model="aggregateData.goodsWeight"></turn-page-num>
                    </div>
                    <div class="item">
                      <p>今日总入库(吨)</p>
                      <turn-page-num :decimal="false" :decimalArr="'height:46px'" :numStyle="'margin-top:5px'" v-model="aggregateData.enterWeight"></turn-page-num>
                    </div>
                    <div class="item">
                      <p>今日总出库(吨)</p>
                      <turn-page-num :decimal="false" :decimalArr="'height:46px'" :numStyle="'margin-top:5px'" v-model="aggregateData.outWeight"></turn-page-num>
                    </div>
                  </div>
                  <!-- 合作金融机构 -->
                  <div class="finance">
                    <main-title>
                      <span slot="title">合作金融机构</span>
                    </main-title>
                    <dt class="list">
                      <!--先不要删 <dd v-for="(item,index) in aggregateData.bankList" :key="index"><span>{{item.bankName}}</span></dd> -->
                      <dd><img src="../../../../../static/img/gq/depotData_4.png" alt=""><span>浙商银行</span></dd>
                      <dd><img src="../../../../../static/img/gq/depotData_5.png" alt=""><span>平安银行</span></dd>
                    </dt>
                  </div>
                  <!-- 库存动态 -->
                  <div class="repertoryBox">
                      <main-title>
                          <span slot="title">库存动态</span>
                      </main-title>
                      <div class="average">
                          <p>
                              <span>上周平均值：</span>
                              <span>{{lastAverage}}T</span>
                          </p>
                          <p>
                              <span>本周平均值：</span>
                              <span>{{nowAverage}}T</span>
                          </p>
                      </div>
                      <div style="width:664px;height:210px;margin-left:-30px;">
                        <line-chartss slot="main" :option="lineChartssOption" v-model="repertoryOption" :chartStyle="'height:210px;min-height:210px;'"></line-chartss>
                      </div>
                  </div>
                  <!-- 洛阳仓 -->
                  <div class="home">
                    <span>{{stockName}}</span>
                    <div class="inWarehousing">
                      <p>今日入库(吨)</p>
                      <p>{{inStorage}}</p>
                      <p>同比 +20</p>
                    </div>
                    <div class="video">
                      <video id="nowPlayer" poster="" playsInline webkit-playsinline autoplay>
                        <source src="http://hls.open.ys7.com/openlive/29cb2829daab4b1f88b4a8fe712937df.m3u8" type="application/x-mpegURL" />
                      </video>
                      <div class="inform">
                        <p>最后入库： {{aggregateData.enterGoodslog ? aggregateData.enterGoodslog.partsnameName : 0}} {{aggregateData.enterGoodslog ? aggregateData.enterGoodslog.goodsEnterweight : 0}} 吨 {{aggregateData.enterGoodslog ? aggregateData.enterGoodslog.goodslogDateStr : '00:00:00'}}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 库存 -->
                  <div class="quantity">
                    <liquidfill-chart v-model="storageArr"></liquidfill-chart>
                  </div>
                  <!-- 库存情况 -->
                  <div class="inventorySituation">
                      <main-title>
                          <span slot="title">库存情况</span>
                      </main-title>
                      <dl class="dialPlate">
                          <dd v-for="(item,index) in stockListPartsname" :key="index"> <p> <span>{{item.partsnameName}}</span> <span>{{item.goodsWeight}}T</span> </p> </dd>
                      </dl>
                       <div class="myTableBody">
                          <ul id="inventoryList" class="list myTableUl">
                            <li  v-for="(item,index) in stockListCompany" :key="index"> <span>{{item.companyName}}</span> <span>{{item.goodsWeight}}吨</span> </li>
                          </ul>
                       </div>
                        
                      <!-- 今日出库 -->
                      <div class="rightBotView">
                        <div class="outWarehousing">
                          <p>今日出库(吨)</p>
                          <p>{{outStorage}}</p>
                          <p>同比 -20</p>
                        </div>
                        <div class="video">
                          <video id="outPlayer" poster="" playsInline webkit-playsinline autoplay>
                            <source src="http://hls.open.ys7.com/openlive/707c3330078a49baa8bf9f187f23510b.m3u8" type="application/x-mpegURL" />
                          </video>
                          <div class="inform">
                            <p>最后出库： {{aggregateData.outGoodsLog ? aggregateData.outGoodsLog.partsnameName : 0}} {{aggregateData.outGoodsLog ? aggregateData.outGoodsLog.goodsOutweight : 0}} 吨 {{aggregateData.outGoodsLog ? aggregateData.outGoodsLog.goodslogDateStr : '00:00:00'}}</p>
                          </div>
                        </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </bg-lay-out>
  </div>
</template>
<script>
require("@/components/ckplayer/ezuikit.js");
require("@/components/gq/l-slide.js");
import topLogoTitle from "@/components/gq/topLogoTitle";
import mainTitle from "@/components/gq/mainTitle";
import bgLayOut from "@/components/bgLayOut/index";
import lineChartss from "@/components/Charts/lineChartss";
import depotDataMap from "@/components/gq/depotDataMap.vue";
import liquidfillChart from "@/components/gq/liquidfillChart.vue";
import { GetSteelRingForStorage } from "@/api/gq/index";
import turnPageNum from "@/components/turnPageNum/index.vue";
import _ from "lodash";
export default {
  name: "index",
  components: {
    topLogoTitle,
    mainTitle,
    lineChartss,
    bgLayOut,
    depotDataMap,
    liquidfillChart,
    turnPageNum
  },
  mounted() {
    this.fetchData();
    this.autoTimer = setInterval(() => {
      // 静默请求
      this.$utils.showLoading = false;
      this.fetchData();
    }, 300000);
  },
  beforeDestroy() {
    clearInterval(this.autoTimer);
  },
  data() {
    return {
      autoTimer: null,
      stockListCompany: [],
      aggregateData: {
        enterGoodslog: {
          partsnameName: 0,
          goodsEnterweight: 0,
          goodslogDateStr: "00:00:00"
        }, // 最新入库
        outGoodsLog: {
          partsnameName: 0,
          goodsOutweight: 0,
          goodslogDateStr: "00:00:00"
        }, // 最新出库
        goodslogList: [], // 出入库动态 ,
        bankList: [], // 合作金融机构 ,
        outWeight: null, // 今日总出库 ,
        warehouseNum: null, // 仓库总数量 ,
        goodsWeight: null, // 库存商品总量 ,
        enterWeight: null, // 今日总入库 ,
        warehouseDetailList: [], //  仓库详情 ,
        memberId: "" // 仓储企业ID
      }, // 总数据
      stockListPartsname: [], // 品名库存列表
      lastAverage: "380", // 上周平均值
      nowAverage: "200", // 本周平均值
      storageArr: [
        {
          name: "满载库存",
          value: "3100"
        },
        {
          name: "库存",
          value: "1500"
        }
      ],
      outStorage: "125", // 今日出库
      inStorage: "50", // 今日入库
      stockName: "洛阳",
      repertoryOption: [], // 库存动态
      lineChartssOption: {
        grid: {
          top: 10
        },
        hideLineColor: true,
        showSymbol: "none",
        color: ["#F0BF24", "#00D0FE"],
        tooltip: {
          show: false
        },
        legend: {
          show: true,
          top: 150,
          right: 0
        },
        legendColor: "#28E787",
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          min: 0,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(40, 231, 135, 0.3)"
            }
          }
        }
      }
    };
  },
  methods: {
    fetchData() {
      this.getData();
      this.startPlayer();
      this.onlineListFun();
    },
    // 请求数据
    async getData() {
      const res = await GetSteelRingForStorage();
      if (res.data.code === "0") {
        this.$set(this, "aggregateData", res.data.result);
      }
    },
    startPlayer() {
      try {
        var player = new EZUIPlayer("nowPlayer");
        // 播放
        player.on("play", play);
        function play() {}
        var outPlayer = new EZUIPlayer("outPlayer");
        outPlayer.on("play", outPlay);
        function outPlay() {}
      } catch (error) {
        console.log(error + "视频组件报错");
      }
    },
    // 切换仓库
    onDepotMap(res) {
      var stockName =
        res.warehouseName.length > 6
          ? res.warehouseName.slice(0, 6) + "..."
          : res.warehouseName;
      this.$set(this, "stockName", stockName);
      this.$set(this, "inStorage", res.enterWeight);
      this.$set(this, "outStorage", res.outWeight);
      var storage = [
        {
          name: "满载库存",
          value: res.fullLoadStock
        },
        {
          name: "库存",
          value: res.goodsWeight
        }
      ];
      this.$set(this, "storageArr", storage);
      this.$set(this, "lastAverage", res.avgStockLtWk);
      this.$set(this, "nowAverage", res.avgStockTsWk);
      this.$set(this, "stockListPartsname", res.stockListPartsname);
      this.setData(res.stockListTsWk, res.stockListLtWk);
      this.$set(this, "stockListCompany", res.stockListCompany);
      this.vehicleListFun();
    },
    vehicleListFun() {
      var tableAutoTimer = null;
      var tableIndex = 0;
      function tableTab() {
        if (
          $(".myTableUl")[0].scrollHeight +
            $(".myTableUl")[0].offsetTop -
            $(".myTableBody").height() -
            1 <=
          $(".myTableBody li").height()
        ) {
          clearInterval(tableAutoTimer);
          $(".myTableUl").css("top", 0);
        } else {
          if (tableIndex === 1) {
            $(".myTableUl")
              .stop()
              .animate(
                {
                  top: -tableIndex * $(".myTableBody li").height()
                },
                400,
                tableTab
              );
          } else {
            $(".myTableUl")
              .stop()
              .animate(
                {
                  top: -tableIndex * $(".myTableBody li").height()
                },
                400,
                tableTab
              );
          }
        }
      }
      function TableNext() {
        tableIndex++;
        if ($(".myTableBody").height() >= $(".myTableUl").height()) {
          // 判断index为最后一个Li时tableIndex为0
          tableIndex = 0;
          clearInterval(tableAutoTimer);
        } else {
          tableTab();
        }
      }
      // 自动轮播
      tableAutoTimer = setInterval(TableNext, 2000);
    },
    onlineListFun() {
      var liHeight = $("#dynamicCondition li").height();
      $("#dynamicCondition").lSlide({ nTop: liHeight });
    },
    setData(stockListTsWk, stockListLtWk) {
      var newArr = [];
      var allValue = []; // 所有值除 0 求最小值
      var min = 0;
      const week = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      stockListLtWk.forEach((item, itemId) => {
        if (item.goodsWeight > 0) {
          allValue.push(item.goodsWeight);
        }
        var newObj = {
          name: week[itemId],
          name2: 0,
          list: [
            {
              name: "上周",
              value: item.goodsWeight
            },
            {
              name: "本周",
              value: null
            }
          ]
        };
        newArr.push(newObj);
      });
      newArr.forEach((element, id) => {
        if (stockListTsWk[id]) {
          allValue.push(stockListTsWk[id].goodsWeight);
          element.list[1].value = stockListTsWk[id].goodsWeight;
        }
      });
      min = _.min(allValue);
      if (min - 200 >= 0) {
        min = min - 200;
      }
      this.$set(this.lineChartssOption.yAxis, "min", min.toFixed(0));
      this.$set(this, "repertoryOption", newArr);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

@mixin rounded($vert, $horz, $radius) {
  @include flex-dc-ic-jc;
  width: 123px;
  height: 98px;
  line-height: 1.2;
  text-indent: 5px;
  background-color: #28e787;
  border-radius: 20px;
  border-#{$vert}-#{$horz}-radius: $radius;
  & p:nth-of-type(1) {
    font-size: 16px;
    font-weight: bold;
  }
  & p:nth-of-type(2) {
    @include din(32px);
  }
  & p:nth-of-type(3) {
    @include din(14px);
  }
  box-shadow: 3px 0 7px rgba(#033d00, 0.56);
}

.depotData {
  .myTableBody {
    position: relative;
    top: 0;
    overflow: hidden;
    height: 200px;
  }
  .myTableBody .myTableUl {
    position: absolute;
    top: 0;
  }
  .map {
    @include absoluteAllSides(270, 0, 0, 44, 10);
    width: 811px;
    height: 622px;
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);

    .chart {
      @include absoluteAllSides(140, 52, 0, 47, 10);

      .outInDynamic {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        .list {
          width: 700px;
          height: 110px;
          overflow: hidden;
          margin-top: 30px;
        }
        .list {
          font-size: 18px;
          li {
            position: relative;
            margin-bottom: 12px;
            span {
              margin-right: 24px;
            }
            span:nth-last-of-type(1) {
              margin-right: 0;
            }
          }
          li:nth-last-of-type(1) {
            margin-bottom: 0;
          }
          .abnormity {
            display: flex;
            color: #f00;
            &::after {
              content: "";
              position: absolute;
              top: 6px;
              right: 0px;
              z-index: 1;
              width: 17px;
              height: 15px;
              background: url("../../../../../static/img/gq/depotData_1.png")
                left top no-repeat;
              background-size: 100% 100%;
            }
          }
          .security {
            display: flex;
            padding-right: 10px;
            color: #28e787;
            &::after {
              content: "";
              position: absolute;
              top: 5px;
              right: 0px;
              z-index: 1;
              width: 15px;
              height: 17px;
              background: url("../../../../../static/img/gq/depotData_2.png")
                left top no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      .proprietary {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 250px;
        color: #28e787;
        font-size: 18px;
        left: 0;
        z-index: 1;
        .num {
          @include din(22px);
          padding: 5px 5px 0 5px;
          line-height: 1;
          background: rgba(0, 105, 83, 0.5);
          color: #f0bd26;
          margin-right: 20px;
          margin-left: 10px;
        }
      }
      .inventory {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 50px;
        left: 0;
        z-index: 1;
        .item {
          margin-bottom: 10px;
          font-size: 24px;
          color: #f0bd26;
        }
        .item:nth-of-type(2) {
          margin-left: 40px;
          margin-right: 40px;
        }
      }
      .finance {
        position: absolute;
        bottom: 60px;
        left: 820px;
        z-index: 1;
        .list {
          dd {
            display: flex;
            align-items: center;
            margin-top: 14px;
            img {
              width: 21px;
              height: 21px;
              margin-right: 8px;
            }
            span {
              color: #28e787;
              font-size: 16px;
            }
          }
        }
      }
      .repertoryBox {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        .average {
          display: flex;
          justify-content: flex-end;
          color: #28e787;
          p:nth-of-type(1) {
            margin-right: 10px;
          }
          p span:nth-of-type(1) {
            font-size: 16px;
          }
          p span:nth-of-type(2) {
            @include din(26px);
          }
        }
        &:after {
          content: "";
          position: absolute;
          top: 110px;
          left: -380px;
          z-index: 1;
          width: 354px;
          height: 290px;
          background: url("../../../../../static/img/gq/depotData_line1.png")
            left top no-repeat;
          background-size: 100% 100%;
        }
      }
      .quantity {
        position: absolute;
        right: 700px;
        bottom: 220px;
        z-index: 1;
        width: 235px;
        height: 235px;
        &::after {
          content: "";
          position: absolute;
          top: -137px;
          right: -230px;
          z-index: 1;
          width: 118px;
          height: 280px;
          background: url("../../../../../static/img/gq/depotData_line4.png")
            left top no-repeat;
          background-size: 100% 100%;
        }
        &:before {
          content: "";
          position: absolute;
          right: -220px;
          bottom: 50px;
          z-index: 1;
          width: 78px;
          height: 4px;
          background: url("../../../../../static/img/gq/depotData_line5.png")
            left top no-repeat;
          background-size: 100% 100%;
        }
      }
      .home {
        position: absolute;
        top: 365px;
        left: 760px;
        z-index: 1;
        width: 102px;
        height: 58px;
        color: #000;
        font-size: 14px;
        line-height: 55px;
        text-align: center;
        background: url("../../../../../static/img/gq/depotData_8.png") left top
          no-repeat;
        background-size: 100% 100%;
        span {
          display: inline-block;
          font-weight: bold;
        }
        &::before {
          content: "";
          position: absolute;
          top: 25px;
          left: -25px;
          z-index: 1;
          width: 22px;
          height: 17px;
          background: url("../../../../../static/img/gq/depotData_3.png") left
            top no-repeat;
          background-size: 100% 100%;
        }
        &::after {
          content: "";
          position: absolute;
          top: 60px;
          left: 70px;
          z-index: 1;
          width: 22px;
          height: 22px;
          background: url("../../../../../static/img/gq/depotData_line2.png")
            left top no-repeat;
          background-size: 100% 100%;
        }
        .inWarehousing {
          position: absolute;
          top: 90px;
          right: -82px;
          z-index: 1;
          @include rounded(top, right, 0);
          &:after {
            content: "";
            position: absolute;
            top: 70px;
            right: -100px;
            z-index: 1;
            width: 120px;
            height: 120px;
            background: url("../../../../../static/img/gq/depotData_line3.png")
              left top no-repeat;
            background-size: 100% 100%;
          }
        }
        .video {
          position: absolute;
          top: -80px;
          left: 170px;
          z-index: 0;
          width: 363px;
          height: 227px;
          padding: 15px;
          background: url("../../../../../static/img/gq/video_border.png") left
            top no-repeat;
          background-size: 100% 100%;
          video {
            width: 334px;
            height: 196px;
          }
          .inform {
            position: absolute;
            left: 15px;
            bottom: 15px;
            z-index: 1;
            p {
              width: 334px;
              height: 28px;
              padding-left: 15px;
              line-height: 28px;
              color: #000;
              font-size: 14px;
              background-image: linear-gradient(
                to right,
                #28e787,
                rgba(#28e787, 0.6)
              );
              overflow: hidden;
            }
          }
        }
      }
      .inventorySituation {
        position: absolute;
        top: 270px;
        right: 30px;
        z-index: 1;
        width: 425px;
        .dialPlate {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 15px;
          margin-top: 15px;
          border-bottom: 1px solid rgba(#28e787, 0.2);
          & dd {
            position: relative;
            width: 83px;
            height: 77px;
            p {
              @include flex-dc-ic-jc;
              @include absoluteAllSides(0, 0, 0, 0, 1);
              & span:nth-of-type(1) {
                font-size: 14px;
              }
              & span:nth-of-type(2) {
                @include din(22px);
                line-height: 1;
              }
            }
          }
          & dd:nth-of-type(1) {
            color: #00d1ff;
            background: url("../../../../../static/img/gq/depotData_9.png") left
              top no-repeat;
            background-size: 100% 100%;
          }
          & dd:nth-of-type(2) {
            color: #8693f3;
            background: url("../../../../../static/img/gq/depotData_10.png")
              left top no-repeat;
            background-size: 100% 100%;
          }
          & dd:nth-of-type(3) {
            color: #f0bd26;
            background: url("../../../../../static/img/gq/depotData_11.png")
              left top no-repeat;
            background-size: 100% 100%;
          }
          & dd:nth-of-type(4) {
            color: #e51e79;
            background: url("../../../../../static/img/gq/depotData_12.png")
              left top no-repeat;
            background-size: 100% 100%;
          }
        }
        .list {
          padding-left: 10px;
          padding-right: 5px;
          margin-top: 15px;
          & li {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-top: 10px;
            color: #28e787;
            font-size: 16px;
          }
          .freeze::after {
            content: "";
            position: absolute;
            top: 3px;
            right: -40px;
            z-index: 1;
            width: 32px;
            height: 18px;
            background: url("../../../../../static/img/gq/depotData_7.png") left
              top no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .rightBotView {
        position: absolute;
        bottom: 70px;
        left: 95px;
        z-index: 1;
        .outWarehousing {
          position: absolute;
          top: 100px;
          left: -109px;
          z-index: 1;
          @include rounded(bottom, right, 0);
        }
        .video {
          position: absolute;
          top: 130px;
          left: 0;
          z-index: 0;
          width: 363px;
          height: 227px;
          padding: 15px;
          background: url("../../../../../static/img/gq/video_border.png") left
            top no-repeat;
          background-size: 100% 100%;
          video {
            width: 334px;
            height: 196px;
          }
          .inform {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 1;
            p {
              width: 334px;
              height: 28px;
              padding-left: 20px;
              line-height: 28px;
              color: #000;
              font-size: 14px;
              background-image: linear-gradient(
                to right,
                #28e787,
                rgba(#28e787, 0.6)
              );
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
</style>